<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px;">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
      />
      <Editor
        :defaultConfig="editorConfig"
        :mode="mode"
        v-model="valueHtml"
        style="height: 100%; overflow-y: hidden;"
        @onCreated="handleCreated"
        @onChange="handleChange"
        @onDestroyed="handleDestroyed"
        @onFocus="handleFocus"
        @onBlur="handleBlur"
        @customAlert="customAlert"
      />
    </div>
  </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css'
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'
import {defineComponent, watch} from "vue";

export default defineComponent({
  components: {Editor, Toolbar},
  data() {
    return {
      show: true
    }
  },
  props: {
    record: {
      type: Object,
    }
  },
  setup(props, context) {
    // 编辑器实例，必须用 shallowRef，重要！
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('')
    const aaa = ref('')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
    })

    watch(props, (props) => {
      console.log("进来了编辑器----------------")
      console.log("props:", props)
      // valueHtml.value = props.record
    })
    // 工具栏配置
    const toolbarConfig = {
      excludeKeys: 'fullScreen'
    }
    // 编辑器配置
    const editorConfig = {
      placeholder: '请输入内容...',
      MENU_CONF: {},

    };
    editorConfig.MENU_CONF['uploadImage'] = {
      fieldName: 'file',
      server: 'http://192.168.0.145:9292/api/sys/upload/uploadFiles1',
    }
    editorConfig.MENU_CONF['uploadVideo'] = {
      maxFileSize: 1024 * 1024 * 1024, // 5M
      fieldName: 'file',
      server: 'http://192.168.0.145:9292/api/sys/upload/uploadFiles1',
    }
    // 组件销毁时，也及时销毁编辑器，重要！
    onBeforeUnmount(() => {
      console.log("组件销毁----")
      const editor = editorRef.value
      valueHtml.value = ''
      if (editor == null) return

      editor.destroy()
    })

    // 编辑器回调函数
    const handleCreated = (editor) => {
      console.log("props:", props.record)
      if (props.record != null && props.record != '') {
        console.log("进来了编辑器----------------")
        valueHtml.value = props.record
      }
      console.log('created', editor);
      editorRef.value = editor // 记录 editor 实例，重要！
    }
    const handleChange = (editor) => {
      aaa.value = editor.getHtml();
      console.log('change:',);
    }
    const handleDestroyed = (editor) => {
      console.log('destroyed', editor)
    }
    const handleFocus = (editor) => {
      console.log('focus', editor)
    }
    const handleBlur = (editor) => {
      console.log('blur', editor)
    }
    const customAlert = (info, type) => {
      alert(`【自定义提示】${type} - ${info}`)
    }
    const customPaste = (editor, event, callback) => {
      console.log('ClipboardEvent 粘贴事件对象', event)

      // 自定义插入内容
      editor.insertText('xxx')

      // 返回值（注意，vue 事件的返回值，不能用 return）
      callback(false) // 返回 false ，阻止默认粘贴行为
      // callback(true) // 返回 true ，继续默认的粘贴行为
    }

    const insertText = () => {
      const editor = editorRef.value
      if (editor == null) return
      editor.insertText('hello world')
    }

    const printHtml = () => {
      const editor = editorRef.value
      if (editor == null) return
      console.log(editor.getHtml())
    }

    const disable = () => {
      const editor = editorRef.value
      if (editor == null) return
      editor.disable()
    }


    return {
      editorRef,
      mode: 'default',
      valueHtml,
      aaa,
      toolbarConfig,
      editorConfig,
      handleCreated,
      handleChange,
      handleDestroyed,
      handleFocus,
      handleBlur,
      customAlert,
      customPaste,
      insertText,
      printHtml,
      disable,
    };
  }
})
</script>
